<template>
    <div>
        <!-- el-breadcrumb 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item >影院列表</el-breadcrumb-item>
            <el-breadcrumb-item :to="{path:'/hall'}">影厅列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- el-card 卡片组件-->
        <el-card>
            <!-- el-col 行布局 -->
            <!-- gutter 属性来指定每一栏之间的间隔 -->
            <el-row :gutter="20">
                <!-- el-col 列布局 -->
                <el-col :span="20">
                    <!-- 使用clearable属性即可得到一个可清空的输入框 -->
                    <el-col :span="6">
                        <el-input placeholder="请输入影院名称" clearable v-model="searchForm.name" @clear="searchCinema">
                            <!--<el-button slot="append" icon="el-icon-search" @click="searchCinema"></el-button>-->
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="请输入影院电话" clearable v-model="searchForm.phone" @clear="searchCinema">
                        </el-input>
                    </el-col>
                    <el-col :span="6">
                        <el-input placeholder="请输入影院地区" clearable v-model="searchForm.area" @clear="searchCinema">
                        </el-input>
                    </el-col>
                    <el-col :span="2">
                        <el-button type="primary" @click="searchCinema()"><i class="el-icon-search"></i>搜索</el-button>
                    </el-col>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加影院</el-button>
                </el-col>
            </el-row>

            <el-table :data="cinemaList" border stripe :header-cell-style="tableCenter" :cell-style="tableCenter">
                <!-- border 边框 -->
                <!-- stripe 斑马纹 -->
                <el-table-column label="#" type="index"></el-table-column>
                <el-table-column label="影院名称" prop="cinemaName"></el-table-column>
                <el-table-column label="影院电话" prop="cinemaPhone"></el-table-column>
                <el-table-column label="行政区" prop="cinemaArea"></el-table-column>
                <el-table-column label="影院地址" prop="cinemaLocation"></el-table-column>
                <el-table-column label="影院图片" prop="cinemaImg">
                    <template slot-scope="sc">
                        <img :src="sc.row.cinemaImg" class="cinemaPic">
                    </template>
                </el-table-column>
                <el-table-column label="影院经度" prop="cinemaLng"></el-table-column>
                <el-table-column label="影院纬度" prop="cinemaLat"></el-table-column>

                <!--<el-table-column label="类型">-->

                    <!--<template slot-scope="sc">{{sc.row.urlType==1?'菜单权限':'接口权限'}}</template>-->
                <!--</el-table-column>-->

                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <!-- 通过 slot-scope 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据 -->
                        <el-button type="warning" size="mini" @click="showEditDialog(scope.row)">修改</el-button>
                        <el-button type="danger" size="mini" @click="removeCinemaById(scope.row.cinemaId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--分页-->
            <!-- size-change和current-change事件来处理页码大小和当前页变动时候触发的事件 -->
            <!-- 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。 -->
            <!-- background 按钮背景深色 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10 , 15, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                background
            ></el-pagination>
        </el-card>

        <!--添加影院-->
        <el-dialog
            title="添加影院"
            :visible.sync="addDialogVisible"
            width="45%"
            @close="addCinemaFormClose"
            @opened="addMapInit"
        >
            <el-form
                :model="addCinemaForm"
                :rules="cinemaRules"
                ref="cinemaRef"
                label-width="80px"
                class="demo-ruleForm"
            >
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="名称" prop="cinemaName">
                            <el-input v-model="addCinemaForm.cinemaName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="行政区" prop="cinemaArea">
                            <el-input v-model="addCinemaForm.cinemaArea"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="电话" prop="cinemaPhone">
                            <el-input v-model="addCinemaForm.cinemaPhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="详细地址" prop="cinemaLocation">
                            <el-input v-model="addCinemaForm.cinemaLocation"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>

                <el-form-item label="图片">
                    <!--<el-input v-model="addCinemaForm.cinemaImg"></el-input>-->
                    <!-- :multiple=false 不要多文件上传 -->
                    <!-- :auto-upload=false 不要选择文件后自动上传 -->
                    <!-- :limit 限制1个 -->
                    <!-- list-type 传图后的样式，可以是text/picture/picture-card -->
                    <el-upload
                        class="upload-demo"
                        accept=".jpg, .jpeg, .png, .gif"
                        :multiple=false
                        :auto-upload=false
                        action=""
                        :on-change="handleChange"
                        :on-remove="handleRemove"
                        :file-list="fileList"
                        :limit=1
                        list-type="text"
                    >
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">只能上传"gif", "jpg", "jpeg", "png"文件，且不超过500kb</div>
                    </el-upload>
                </el-form-item>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="经度" prop="cinemaLng">
                            <el-input v-model.number="addCinemaForm.cinemaLng"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="纬度" prop="cinemaLat">
                            <el-input v-model.number="addCinemaForm.cinemaLat"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="地图">
                    <div id="addContainer">

                    </div>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addCinema">确定</el-button>
                <el-button @click="addDialogVisible = false">取消</el-button>
            </span>
        </el-dialog>
        
        <!--更新影院-->
        <el-dialog
                title="修改影院"
                :visible.sync="updateDialogVisible"
                width="45%"
                @close="updateCinemaFormClose"
                @opened="updateMapInit"
        >
            <el-form
                    :model="updateCinemaForm"
                    :rules="cinemaRules"
                    ref="cinemaRef"
                    label-width="80px"
                    class="demo-ruleForm"
            >
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="名称" prop="cinemaName">
                            <el-input v-model="updateCinemaForm.cinemaName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="行政区" prop="cinemaArea">
                            <el-input v-model="updateCinemaForm.cinemaArea"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="电话" prop="cinemaPhone">
                            <el-input v-model="updateCinemaForm.cinemaPhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="详细地址" prop="cinemaLocation">
                            <el-input v-model="updateCinemaForm.cinemaLocation"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>

                <el-form-item label="图片">
                    <!--<el-input v-model="updateCinemaForm.cinemaImg"></el-input>-->
                    <!-- :multiple=false 不要多文件上传 -->
                    <!-- :auto-upload=false 不要选择文件后自动上传 -->
                    <!-- :limit 限制1个 -->
                    <!-- list-type 传图后的样式，可以是text/picture/picture-card -->
                    <el-row :gutter="10">
                        <el-col :span="10">
                            <el-image
                                style="width: 100px; height: 60px"
                                :src="updateCinemaForm.cinemaImg"
                            >
                            </el-image>
                        </el-col>
                        <el-col :span="13">
                            <el-upload
                                class="upload-demo"
                                accept=".jpg, .jpeg, .png, .gif"
                                :multiple=false
                                :auto-upload=false
                                action=""
                                :on-change="handleChange"
                                :on-remove="handleRemove"
                                :file-list="fileList"
                                :limit=1
                                list-type="text"
                            >
                                <el-button size="small" type="primary">点击上传</el-button>
                                <div slot="tip" class="el-upload__tip">只能上传"gif", "jpg", "jpeg", "png"文件，且不超过500kb。如果没有上传，将会使用以下地址</div>
                            </el-upload>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item label="图片地址">
                    <el-input v-model="updateCinemaForm.cinemaImg"></el-input>
                </el-form-item>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="经度" prop="cinemaLng">
                            <el-input v-model.number="updateCinemaForm.cinemaLng"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="纬度" prop="cinemaLat">
                            <el-input v-model.number="updateCinemaForm.cinemaLat"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="地图">
                    <div id="updateContainer"> </div>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateCinema">确定</el-button>
                <el-button @click="updateDialogVisible = false">取消</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import AMap from 'AMap'
    export default {
        name: "Cinema",
        data(){
            return{
                //影院列表
                cinemaList:[],
                //分页的三个属性
                total: 0,
                pageNum: 1,
                pageSize: 5,
                //搜索栏
                searchForm:{
                    pageNum:"",
                    pageSize:"",
                    name:"",
                    phone:"",
                    area:""
                },

                //添加弹窗普通参数
                addCinemaForm:{
                    cinemaName:"",
                    cinemaPhone:"",
                    cinemaArea:"",
                    cinemaLocation:"",
                    cinemaImg:"",
                    cinemaLng:"",
                    cinemaLat:""
                },
                //由于要上传图片，实际要FormData传参
                addCinemaParam:{},
                //上传图片的列表，实际上没什么用，eleUI所需
                fileList:[],

                //上传的图片
                fileImg:"",

                //添加弹窗默认不可见
                addDialogVisible:false,

                //添加弹窗普通参数
                updateCinemaForm:{
                },
                //由于要上传图片，实际要FormData传参
                updateCinemaParam:{},
                //上传图片的列表，实际上没什么用，eleUI所需
                fileList:[],

                //上传的图片
                fileImg:"",

                //添加弹窗默认不可见
                updateDialogVisible:false,
                
                //弹窗的输入规则
                cinemaRules:{
                    cinemaName: [
                        { required: true, message: "请输入影院名称", trigger: "blur" },
                        {
                            min: 1,
                            max: 20,
                            message: "影院名称在1-20个字符之间",
                            trigger: "blur"
                        }
                    ],
                    cinemaPhone:[
                        { required:true,message:"请输入影院联系电话",trigger:"blur"},
                        {
                            min: 8,
                            max: 50,
                            message: "影院电话在8-50个字符之间",
                            trigger: "blur"
                        }
                    ],
                    cinemaArea:[
                        { required:false,message:"请输入影院行政区",trigger:"blur"},
                        {
                            min: 2,
                            max: 8,
                            message: "影院行政区在2-8个字符之间",
                            trigger: "blur"
                        }
                    ],
                    cinemaLocation:[
                        { required:true,message:"请输入影院详细地址",trigger:"blur"},
                        {
                            min: 5,
                            max: 20,
                            message: "影院详细地址在5-20个字符之间",
                            trigger: "blur"
                        }
                    ],
                    cinemaLng:[
                        { required:true,message:"请输入影院经度",trigger:"blur"},
                        {
                            type: 'number',
                            // max: 20, //经纬度字符超过20
                            message: "请输入数字",
                            trigger: "blur"
                        }
                    ],
                    cinemaLat:[
                        { required:true,message:"请输入影院纬度",trigger:"blur"},
                        {
                            type: 'number',
                            message: "请输入数字",
                            trigger: "blur"
                        }
                    ],
                },
                //地图标记，因为不知道怎么获得Marker，所以放在列表里
                mapMarker:new Array(),
            }
        },
        methods:{
            //表格居中
            tableCenter() {
                return "text-align:center"
            },

            //分页查询
            searchCinema(){
                this.$api.cinema.searchCinemaByCon(this.searchForm)
                    .then((res)=>{
                        // console.log(res);
                        if (res.data.code=="200"){
                            this.cinemaList=res.data.data.list;
                            this.total=res.data.data.total;
                            this.pageNum=res.data.data.pageNum;
                            this.pageSize=res.data.data.pageSize;
                            // 查询成功就不提示吧
                            // this.$message({
                            //     showClose: true,
                            //     message: '查询成功',
                            //     type: 'success'
                            // });
                        }else {
                            this.$message({
                                showClose: true,
                                message: '查询失败',
                                type: 'error'
                            });
                        }
                    })
            },
            //每页大小改变
            handleSizeChange(newSize) {
                this.searchForm.pageSize = newSize;
                this.searchCinema();
            },
            //每页页码改变
            handleCurrentChange(newPage) {
                this.searchForm.pageNum = newPage;
                this.searchCinema();
            },

            // 删除影院
            removeCinemaById(id) {
                this.$confirm('确定要删除这个电影院吗？一旦删除，只能去数据库里修改状态。是否继续？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$api.cinema.deleteCinemaById(id)
                        .then((res)=>{
                            if (res.data.code=="200"){
                                this.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                this.searchCinema();
                            }else {
                                this.$message({
                                    type: 'error',
                                    message: '删除失败!'
                                });
                            }
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            //图片改变
            handleChange(file,filesList){
                // console.log(file);
                this.fileImg=file;
                // this.addCinemaParam = new FormData();
                // this.addCinemaParam.append('fileImg', file.raw, file.name);
                // console.log(this.addCinemaParam);
            },
            //图片移除
            handleRemove(file,filesList){
                this.addCinemaParam.delete('fileImg');
            },

            //添加影院
            addCinema(){
                this.$refs.cinemaRef.validate(valid => {
                    if (!valid){
                        this.$message.error("存在错误表单")
                        return;
                    }

                    this.addCinemaParam = new FormData();
                    //循环把表单里的键值和对应的value加入FormData里
                    // console.log(this.addCinemaParam);
                    Object.keys(this.addCinemaForm).forEach((key) => {
                        this.addCinemaParam.append(key, this.addCinemaForm[key]);
                    });

                    if (this.fileImg!=""){
                        //把图片加入FormData里
                        this.addCinemaParam.append("fileImg",this.fileImg.raw,this.fileImg.name);
                    }
                    // console.log(this.addCinemaParam);
                    //执行添加
                    this.$api.cinema.addCinemaFormData(this.addCinemaParam)
                        .then((res)=>{
                            // console.log(res);
                            if (res.data.code=="200"){
                                this.$message.success(res.data.msg);
                            }else {
                                this.$message.error(res.data.msg);
                            }
                            this.$refs.cinemaRef.resetFields();
                            this.addDialogVisible=false;
                            this.fileImg="";//清空file
                            this.searchCinema();
                        })
                });

            },
            // 添加影院弹窗关闭
            addCinemaFormClose(){
                this.$refs.cinemaRef.resetFields();
            },

            //添加弹窗的地图初始化
            addMapInit(){
                //初始位置放在第一个万达
                let lng = this.addCinemaForm.cinemaLng==""?"121.242249":this.addCinemaForm.cinemaLng;
                let lat = this.addCinemaForm.cinemaLat==""?"31.057309":this.addCinemaForm.cinemaLat;
                let map = new AMap.Map('addContainer', {
                    zoom:15,//缩放级别
                    // center: [116.397428, 39.90923],//中心点坐标
                    center: [lng, lat],
                    viewMode:'3D',//使用3D视图

                    // 使用多个图层   或者使用下面的map.add方法添加图层
                    // layers: [
                    //     new AMap.TileLayer.Satellite(),
                    //     new AMap.TileLayer.RoadNet()
                    // ],
                    // resizeEnable: true,//是否监控地图容器尺寸变化，默认false
                    // lang: 'en'
                });

                AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
                    map.addControl(new AMap.ToolBar());
                    map.addControl(new AMap.Scale());
                    map.addControl(new AMap.ControlBar);
                });


                //在内部函数里，this不再是VueComponent，无效了，所以用page指代VueComponent
                let page = this;
                map.on('click',function (e) {
                    // console.log(page); //这里可以看出，所谓的page，即外面所用的this，就是VueComponent，
                    //先移除地图上所有标记
                    for(let i of page.mapMarker){
                        map.remove(i);
                    }
                    //获取点击的位置，转为经纬度
                    page.addCinemaForm.cinemaLng = e.lnglat.getLng();
                    page.addCinemaForm.cinemaLat = e.lnglat.getLat();
                    //添加标记
                    let markerAdd = new AMap.Marker({
                        position:[e.lnglat.getLng(), e.lnglat.getLat()],
                    });
                    map.add(markerAdd);
                    //因为不知道怎么获取marker标记，所以只好放在this的数组里
                    page.mapMarker.push(markerAdd);
                });
                let a=document.getElementById("mapSearch");
                // console.log(a);
            },

            showEditDialog(obj){
                this.updateCinemaForm = obj;
                //数字类型似乎有错误，必须要类型转换
                this.updateCinemaForm.cinemaLng=parseFloat(this.updateCinemaForm.cinemaLng);
                this.updateCinemaForm.cinemaLat=parseFloat(this.updateCinemaForm.cinemaLat);

                this.updateDialogVisible = true;
            },
            // 添加影院弹窗关闭
            updateCinemaFormClose(){
                this.$refs.cinemaRef.resetFields();
            },
            //添加弹窗的地图初始化
            updateMapInit(){
                //初始位置放在第一个万达
                let lng = this.updateCinemaForm.cinemaLng;
                let lat = this.updateCinemaForm.cinemaLat;
                let map = new AMap.Map('updateContainer', {
                    zoom:15,//缩放级别
                    // center: [116.397428, 39.90923],//中心点坐标
                    center: [lng, lat],
                    viewMode:'3D',//使用3D视图

                    // 使用多个图层   或者使用下面的map.add方法添加图层
                    // layers: [
                    //     new AMap.TileLayer.Satellite(),
                    //     new AMap.TileLayer.RoadNet()
                    // ],
                    resizeEnable: true,//是否监控地图容器尺寸变化，默认false
                    // lang: 'en'
                });

                AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
                    map.addControl(new AMap.ToolBar());
                    map.addControl(new AMap.Scale());
                    map.addControl(new AMap.ControlBar);
                });

                //生成起始标记点
                let markerInit = new AMap.Marker({
                    position:[lng, lat],
                });
                map.add(markerInit);
                this.mapMarker.push(markerInit);

                //在内部函数里，this不再是VueComponent，无效了，所以用page指代VueComponent
                let page = this;
                map.on('click',function (e) {
                    // console.log(page); //这里可以看出，所谓的page，即外面所用的this，就是VueComponent，
                    //先移除地图上所有标记
                    for(let i of page.mapMarker){
                        map.remove(i);
                    }
                    //获取点击的位置，转为经纬度
                    page.updateCinemaForm.cinemaLng = e.lnglat.getLng();
                    page.updateCinemaForm.cinemaLat = e.lnglat.getLat();
                    //添加标记
                    let markerAdd = new AMap.Marker({
                        position:[e.lnglat.getLng(), e.lnglat.getLat()],
                    });
                    map.add(markerAdd);
                    //因为不知道怎么获取marker标记，所以只好放在this的数组里
                    page.mapMarker.push(markerAdd);
                });
            },
            updateCinema(){
                this.$refs.cinemaRef.validate(valid => {
                    if (!valid){
                        this.$message.error("存在错误表单");
                        return;
                    }

                    this.updateCinemaParam = new FormData();
                    //循环把表单里的键值和对应的value加入FormData里
                    // console.log(this.updateCinemaParam);
                    Object.keys(this.updateCinemaForm).forEach((key) => {
                        this.updateCinemaParam.append(key, this.updateCinemaForm[key]);
                    });

                    if (this.fileImg!=""){
                        //把图片加入FormData里
                        this.updateCinemaParam.append("fileImg",this.fileImg.raw,this.fileImg.name);
                    }

                    // console.log(this.updateCinemaParam);
                    //执行添加
                    this.$api.cinema.updateCinemaFormData(this.updateCinemaParam)
                        .then((res)=>{
                            // console.log(res);
                            if (res.data.code=="200"){
                                this.$message.success(res.data.msg);
                            }else {
                                this.$message.error(res.data.msg);
                            }
                            this.$refs.cinemaRef.resetFields();
                            this.updateDialogVisible=false;
                            this.fileImg="";//清空file
                            this.searchCinema();
                        })
                });
            }

        },

        //初始化
        created(){
            this.searchCinema();
        },
    }
</script>

<style scoped>
    .cinemaPic{
        height: 60px;
        width: 100px;
    }
    #addContainer{
        height: 300px;
        width: 400px;
    }
    #updateContainer{
        height: 300px;
        width: 400px;
    }
</style>